<template>
  <div>
    <template v-for="(item, index) in productFrom">
      <div
        v-for="list in Math.ceil(item.llOutStockMxList.length / num)"
        :key="index"
        style="height: 98%;border:1px solid #fff"
      >
        <div
          style="
            display: flex;
            padding: 10px 0;
            align-items: center;
            margin: 10px 0;
          "
        >
          <div style="width: 25%" />
          <div
            style="
              flex: 1;
              text-align: center;
              font-size: 14px !important;
              letter-spacing: 10px;
              padding: 5px 0;
              border-bottom: 3px double #000;
            "
          >
            <div>申楷桢防伪科技技术有限公司&nbsp;</div>
            发料单
          </div>
          <div style="width: 25%; text-align: right">
            <div style="font-size: 12px">№. {{ item.agreementNo }}</div>
          </div>
        </div>
        <div
          style="
            display: flex;
            padding: 10px 0;
            flex-wrap: wrap;
            line-height: 1.5em;
            font-size: 12px;
          "
        >
          <div style="width: 33%">订单单号: {{ item.saleOrderNo }}</div>
          <div style="width: 33%">产品名称: {{ item.orderProductName }}</div>
          <!-- <div style="width: 33%">产品编号: {{ item.productCode }}</div> -->
          <div style="width: 33%">发料日期: {{ getDate() }}</div>
        </div>
        <div style="display: flex; justify-content: center">
          <table border="0" cellspacing="0" style="width: 100%">
            <thead>
              <tr style="height: 26px">
                <th style="border: 1px #000 solid">出库单号</th>
                <th style="border: 1px #000 solid; border-left: none">
                  领料机台
                </th>
                <th style="border: 1px #000 solid; border-left: none">
                  物料编号
                </th>
                <th style="border: 1px #000 solid; border-left: none">
                  物料名称
                </th>
                <th style="border: 1px #000 solid; border-left: none">
                  规格型号
                </th>
                <th style="border: 1px #000 solid; border-left: none">单位</th>
                <th style="border: 1px #000 solid; border-left: none">数量</th>
                <th style="border: 1px #000 solid; border-left: none">备注</th>
              </tr>
            </thead>
            <tbody>
              <template
                v-for="j in Math.ceil(item.llOutStockMxList.length / num) * num"
              >
                <template v-if="j > (list - 1) * num && j <= list * num">
                  <tr
                    v-if="j <= item.llOutStockMxList.length"
                    style="height: 26px"
                  >
                    <td
                      style="
                        border: 1px #000 solid;
                        border-top: none;
                        text-align: center;
                      "
                    >
                      {{ item.llOutStockMxList[j - 1].outStockBillNo }}
                    </td>
                    <td
                      style="
                        border: 1px #000 solid;
                        border-top: none;
                        text-align: center;
                      "
                    >
                      {{ item.llOutStockMxList[j - 1].getMaterialMachineName }}
                    </td>
                    <td
                      style="
                        border: 1px #000 solid;
                        border-left: none;
                        border-top: none;
                        text-align: center;
                      "
                    >
                      {{ item.llOutStockMxList[j - 1].materialNo }}
                    </td>
                    <td
                      style="
                        border: 1px #000 solid;
                        border-left: none;
                        border-top: none;
                        text-align: center;
                      "
                    >
                      {{ item.llOutStockMxList[j - 1].materialName }}
                    </td>
                    <td
                      style="
                        border: 1px #000 solid;
                        border-left: none;
                        border-top: none;
                        text-align: center;
                      "
                    >
                      {{ item.llOutStockMxList[j - 1].stockMaterialName }}
                    </td>
                    <td
                      style="
                        border: 1px #000 solid;
                        border-left: none;
                        border-top: none;
                        text-align: center;
                      "
                    >
                      {{ item.llOutStockMxList[j - 1].materialUnit }}
                    </td>
                    <td
                      style="
                        border: 1px #000 solid;
                        border-left: none;
                        border-top: none;
                        text-align: center;
                      "
                    >
                      {{ item.llOutStockMxList[j - 1].outStockQuantity }}
                    </td>
                    <td
                      style="
                        border: 1px #000 solid;
                        border-left: none;
                        border-top: none;
                        text-align: center;
                      "
                    >
                      {{ item.llOutStockMxList[j - 1].outStockRemark }}
                    </td>
                  </tr>
                  <tr v-else style="height: 26px">
                    <td
                      style="
                        border: 1px #000 solid;
                        border-top: none;
                        text-align: center;
                      "
                    ></td>
                    <td
                      style="
                        border: 1px #000 solid;
                        border-left: none;
                        border-top: none;
                        text-align: center;
                      "
                    ></td>
                    <td
                      style="
                        border: 1px #000 solid;
                        border-left: none;
                        border-top: none;
                        text-align: center;
                      "
                    ></td>
                    <td
                      style="
                        border: 1px #000 solid;
                        border-left: none;
                        border-top: none;
                        text-align: center;
                      "
                    ></td>
                    <td
                      style="
                        border: 1px #000 solid;
                        border-left: none;
                        border-top: none;
                        text-align: center;
                      "
                    ></td>
                    <td
                      style="
                        border: 1px #000 solid;
                        border-left: none;
                        border-top: none;
                        text-align: center;
                      "
                    ></td>
                    <td
                      style="
                        border: 1px #000 solid;
                        border-left: none;
                        border-top: none;
                        text-align: center;
                      "
                    ></td>
                    <td
                      style="
                        border: 1px #000 solid;
                        border-left: none;
                        border-top: none;
                        text-align: center;
                      "
                    ></td>
                  </tr>
                </template>
              </template>
            </tbody>
          </table>
        </div>
        <div style="margin: 10px 0; line-height: 1.5em; font-size: 12px">
          领料备注:
          <div
            style="border: 1px #000 solid; height: 60px; margin-top: 6px"
          ></div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "PrintOrder",
  props: {
    productFrom: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      showT: true,
      num: 8,
    };
  },
  watch: {
    productFrom: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
  created() {
   
  },
  methods: {
    getDate() {
      let date = new Date();
      //年
      let year = date.getFullYear();
      //月份是从0月开始获取的，所以要+1;
      let month = date.getMonth() + 1;
      //日
      let day = date.getDate();
      return year + '-' + month + '-' + day
    },
  },
};
</script>

<style lang="scss" scoped>
body{
  margin: 0;
  padding: 0;
}
table,
td,
th {
  border: 1px solid #000;
}
table {
  width: 100%;
  td,
  th {
    padding: 0 4px;
    text-align: center;
    white-space: nowrap;
    line-height: 22px;
    height: 22px;
  }
}
</style>
